<div class="hbox hbox-auto-xs hbox-auto-sm fd-enter" ng-init="app.settings.asideFolded = false; app.settings.asideDock = false;">
	<!-- main -->
	<div class="col">	
		<!-- main header -->
		<div class="bg-light lter b-b wrapper-md">
			<div class="row">
				<div class="col-sm-6 col-xs-12">
					<h1 class="m-n font-thin h3 text-black">Home Page</h1>
					<small class="text-muted">Welcome to sweeter application</small>
				</div>
				<div class="col-sm-6 text-right hidden-xs">
					<div class="inline m-r text-left">
						<div class="m-b-xs">
							3000 <span class="text-muted">users</span>
						</div>
						<div ng-init="data1=[ 106,108,110,105,110,109,105,104,107,109,105,100,105,102,101,99,98 ]"
							ui-jq="sparkline" class="sparkline inline"
							ui-options="{{data1}}, {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}">loading...</div>
					</div>
					<div class="inline text-left">
						<div class="m-b-xs">
							20,0000 <span class="text-muted">flows</span>
						</div>
						<div ng-init="data2=[ 105,102,106,107,105,104,101,99,98,109,105,100,108,110,105,110,109 ]"
							ui-jq="sparkline" class="sparkline inline"
							ui-options="{{data2}}, {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}">loading...</div>
					</div>
				</div>
			</div>
		</div>
		<!-- / main header -->
		
		<div class="wrapper-md" ng-controller="FlotChartDemoCtrl">		
			<!-- 概要介绍开始 -->
			<div class="row">
				<div class="col-md-5">
					<div class="row row-sm text-center">
						<div class="col-xs-6">
							<a href="http://docs.angularjs.cn/api" target="_blank">
							<div class="panel padder-v item">
								<div class="text-info font-thin h2 m-t-xs m-b-xs">AngularJs</div>
								<span class="text-muted text-xs">Font framework</span>
								<div class="top text-right w-full">
									<i class="fa fa-caret-down text-warning m-r-sm"></i>
								</div>
							</div>
							</a>
						</div>
						<div class="col-xs-6">
							<a href="http://v3.bootcss.com/" target="_blank" class="block panel padder-v bg-primary item"> 
								<span class="text-white font-thin h2 block m-t-xs m-b-xs">Bootstrap</span> 
								<span class="text-muted text-xs">UI kits</span> 
							</a>
						</div>
						<div class="col-xs-6">
							<a href="http://mybatis.github.io/mybatis-3/zh/index.html" target="_blank" class="block panel padder-v bg-info item"> 
								<span class="text-white font-thin h2 block m-t-xs m-b-xs">Mybatis</span> 
								<span class="text-muted text-xs">Persistence</span> 
							</a>
						</div>
						<div class="col-xs-6">
							<a href="http://spring.io/" target="_blank">
							<div class="panel padder-v item">
								<div class="font-thin h2 m-t-xs m-b-xs">Spring</div>
								<span class="text-muted text-xs">javaEE</span>
								<div class="bottom text-left">
									<i class="fa fa-caret-up text-warning m-l-sm"></i>
								</div>
							</div>
							</a>
						</div>
						<div class="col-xs-12 m-b-md">
							<div class="r bg-light dker item hbox no-border">
								<div class="col w-xs v-middle hidden-md">
									<div ng-init="data1=[60,40]" ui-jq="sparkline"
										ui-options="{{data1}}, {type:'pie', height:40, sliceColors:['{{app.color.warning}}','#fff']}"
										class="sparkline inline"></div>
								</div>
								<div class="col dk padder-v r-r">
									<div class="text-primary-dk font-thin h3">
										<span>JavaEE platform</span>
									</div>
									<span class="text-muted text-xs">Main technical composition of sweeter</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-7">
					<div class="panel wrapper">
						<label class="i-switch bg-warning pull-right" ng-init="showSpline=true"> 
							<input type="checkbox" ng-model="showSpline"> <i></i>
						</label>
						<h4 class="font-thin m-t-none m-b text-muted">Attention tracing of last 9 days</h4>
						<div ui-jq="plot" ui-refresh="showSpline" style="height: 240px" ui-options="
			              [
			                { data: {{d0_1}}, label:'visitors count', points: { show: true, radius: 1}, splines: { show: showSpline, tension: 0.4, lineWidth: 1, fill: 0.8 } },
			                { data: {{d0_2}}, label:'download count', points: { show: true, radius: 1}, splines: { show: showSpline, tension: 0.4, lineWidth: 1, fill: 0.8 } }
			              ], 
			              {
			                colors: ['{{app.color.info}}', '{{app.color.primary}}'],
			                series: { shadowSize: 3 },
			                xaxis:{ font: { color: '#a1a7ac' } },
			                yaxis:{ font: { color: '#a1a7ac' }, max:20 },
			                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
			                tooltip: true,
			                tooltipOpts: { content: 'Visits of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 10, y: -25 } }
			              }"></div>
					</div>	
				</div>
			</div>
			<!-- / 概要介绍结束 -->

			<!-- 详细介绍开始 -->
			<div class="panel hbox hbox-auto-xs no-border">				
				<div class="col wrapper-lg w-lg bg-light dk r-r">				
				  <h3 class="text-info-dker font-thin m-t-none m-b-lg">Important Angular Modules</h3>
			      <p class="zn-font">下面列举了Sweeter中的重要<code>AngularJs</code>扩展及官方的描述。如果你对这些扩展内容有较为全面的了解，将能够帮助你更好的使用Sweeter的前端。如果你需要详细知道Sweeter集成的<code>AngularJs</code>扩展，可以查看<code>config.lazyload.js</code>文件</p>       
			      <div class="row">
			        <div class="col-md-6">
			            <h4 class="m-t-md">angular-bootstrap-nav-tree</h4>
			            <p>This is a Tree directive for Angular JS apps that use Bootstrap CSS. Check the online <a href="https://github.com/nickperkinslondon/angular-bootstrap-nav-tree"><strong>document</strong></a></p>			
			            <h4 class="m-t-md">angular-file-upload</h4>
			            <p>Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support. Check the online <a href="https://github.com/danialfarid/ng-file-upload"><strong>document</strong></a>. </p>
			        	<h4 class="m-t-md">videogular</h4>
			            <p>Videogular is an HTML5 video player for AngularJS. Check the online <a href="https://github.com/2fdevs/videogular"><strong>document</strong></a>. </p>
			        	<h4 class="m-t-md">ui-grid</h4>
			            <p>Ui-grid is a datagrid similar to koGrid or slickGrid. Check the online <a href="https://github.com/angular-ui/ui-grid"><strong>document</strong></a>. </p>
			        </div>
			        <div class="col-md-6">			
			            <h4 class="m-t-md">ngResource</h4>
			            <p>The 'ngResource' module provides interaction support with RESTful services. Check the online <a href="http://angularjs.org"><strong>document</strong></a>. </p>
			            <h4 class="m-t-md">ui-router</h4>
			            <p>The de-facto solution to flexible routing with nested views in AngularJS. Check the online <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router"><strong>document</strong></a>. </p>		
			            <h4 class="m-t-md">ui-bootstrap-tpls</h4>
			            <p>Native AngularJS (Angular) directives for Bootstrap. Check the online <a href="http://www.bootcdn.cn/angular-ui-bootstrap/"><strong>document</strong></a>. </p>
			            <h4 class="m-t-md">ngAnimate</h4>
			            <p>The 'ngAnimate' module provides support for JS, CSS3 transition and keyframe animation hooks within directives. </p>	
			        </div>
			      </div>
				</div>
			</div>
			<!-- / 详细介绍结束 -->	
			
			<!-- 详细介绍开始 -->			
			<table class="table table-border bg-white-only"><tbody>
		      	 <tr><td colspan="2"><h3 class="text-info-dker font-thin m-t-md m-b-md">Core of back and frontpoint</h3></td></tr>
		         <tr><td>GeneralObjectAccessService</td><td class="zn-font">提供ORM服务，可以对任意的javabean根据注解进行CRUD操作，包含简单的二级关联操作。同时也提供了分页、批量以及自动管理主键等常用的服务</td></tr>
		         <tr><td>SqlInvokeService</td><td class="zn-font">通过ID直接执行Mybatis配置的Sql语句并得到返回结果。 其ID需要在*-config.properties文件中登记。对于列表查询支持分页。</td></tr>
		         <tr><td>CacheAccessor</td><td class="zn-font">提供静态操作缓存的服务，支持缓存分区、多缓存形态并存（例如，Map、Ehcahe同时使用）。注意，业务开发过程中，建议使用注解形式操作缓存。</td></tr>
		         <tr><td>Restful Controller</td><td class="zn-font">通过形如<code>/entity/**/{resourceName}</code>的请求直接操作资源实体。通过形如<code>/service/**</code>的请求直接操作注册过的服务层接口或sql语句。</td></tr>
		         <tr><td>AsyncReqPushManager</td><td class="zn-font">消息推送功能服务接口，用户传入封装后的消息对象，可以实现全局的消息推送功能。</td></tr>
		         <tr><td>AbstractLoginController</td><td class="zn-font">登录业务主流程，提供了通过手机号或用户名登录、验证码、输入错误锁定等各种支持。用户需扩展自定义的初始化资源加载的内容来实现最终的登录过程。</td></tr>
		         <tr><td>Ui-jq directives</td><td class="zn-font">统一集成JQuery插件到AngularJs中，使用示例：<code>&lt;input ui-jq="datepicker" ui-options="{showOn:'click'}, secondParameter, thirdParameter" ui-refresh="iChange"></code></td></tr>
		         <tr><td>Ui-validate directives</td><td class="zn-font">自定义验证方式的扩展，作为对angular验证框架的补充。例如：<code>&lt;input ui-validate="{ largethen : '$value > anotherModel', unique : 'validateUnique($value)' }" ui-validate-watch=" { target1 : 'anotherModel' } "></code></td></tr>
		         <tr><td>Ui-load directives</td><td class="zn-font">延迟加载CSS、JS文件，与ngLazyload不同的是,它会将资源已通过dom操作，直接增加到页面中。</td></tr></tbody>
		    </table>
			<!-- / 详细介绍结束 -->
			
			<!-- 详细介绍开始 -->
			<div class="panel hbox hbox-auto-xs no-border">				
				<div class="col wrapper-lg w-lg bg-light dk r-r">				
				  <h3 class="text-info-dker font-thin m-t-none m-b-lg">Built-in Jquery Plugins</h3>
			      <p class="zn-font">所有JQuery插件可通过指令 <code>ui-jq</code>直接使用， 不必为每个插件创建单独的指令。 你可通过配置<code>config.lazyload.js</code>文件中的Angular常量<code>JQ_CONFIG</code>来植入新的插件， 注意，它们都将是延迟加载的。</p>       
			      <div class="row">
			        <div class="col-md-6">
			            <h4 class="m-t-md">FullCalendar</h4>
			            <p>A complete AngularJS directive for the Arshaw FullCalendar. Check the online <a href="http://arshaw.com/fullcalendar/"><strong>document</strong></a> and <a href="http://angular-ui.github.io/ui-calendar/"><strong>Angular fullcalendar wrapper</strong></a></p>			
			            <h4 class="m-t-md">Datatables</h4>
			            <p>It is based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. Check the online <a href="http://datatables.net/"><strong>document</strong></a>. </p>			            
			            <h4 class="m-t-md">Chosen</h4>
			            <p>Chosen is a library for making long, unwieldy select boxes more friendly. Check the online <a href="http://github.com/harvesthq/chosen"><strong>document</strong></a>. </p>			            
			            <h4 class="m-t-md">Bootstrap-filestyle</h4>
			            <p>jQuery customization of input html file for Bootstrap Twitter. Check the online <a href="http://markusslima.github.io/bootstrap-filestyle/"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">Slider</h4>
			            <p>Slider component with different options for bootstrap. Check the online <a href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>.</p>			
			            <h4 class="m-t-md">TouchSpin</h4>
			            <p> A mobile and touch friendly input spinner component for Bootstrap 3. Check the online <a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">WYSISYG</h4>
			            <p>Tiny bootstrap-compatible WISWYG rich text editor. Check the online <a href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>. </p>
			        </div>
			        <div class="col-md-6">			
			            <h4 class="m-t-md">Flotchart</h4>
			            <p>Flot is a focus on simple usage, attractive looks and interactive features. Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">Sparklines</h4>
			            <p>Generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. Check the online <a href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">Easy pie chart</h4>
			            <p>Easy pie chart uses the canvas element to render simple pie charts for single values. Check the online <a href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>. </p>		
			            <h4 class="m-t-md">Sortable</h4>
			            <p>It is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API. Check the online <a href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">Nestable</h4>
			            <p>Drag & drop hierarchical list with mouse and touch compatibility. Check the online <a href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">SlimScroll</h4>
			            <p>SlimScroll is a small jQuery plugin that transforms any div into a scrollable area. Check the online <a href="http://plugins.jquery.com/slimScroll/"><strong>document</strong></a>. </p>			
			            <h4 class="m-t-md">JvectorMap</h4>
			            <p>Maps converter renders maps and provides JS API to control them. Check the online <a href="http://jvectormap.com/"><strong>document</strong></a>. </p>
			        </div>
			      </div>
				</div>
			</div>
			<!-- / 详细介绍结束 -->
					
		</div>
	</div>
	<!-- / main -->
	
	
	<!-- right col -->
	<div class="col w-md bg-white-only b-l bg-auto no-border-xs">
		<div class="padder-md">
			<!-- streamline -->			
			<h3 class="text-info-dker font-thin m-t-md m-b-md">Scrum planning</h3>
			<div class="streamline b-l m-b">
				<div class="sl-item">
					<div class="m-l">
						<div class="text-muted">Fri, 30 Oct</div>
						<p class="zn-font">分布式文件系统的统一抽象层方案及默认实现.</p>
					</div>
				</div>
				<div class="sl-item">
					<div class="m-l">
						<div class="text-muted">One week later</div>
						<p class="zn-font">默认的Ehcahe的集成.</p>
					</div>
				</div>
				<div class="sl-item b-success b-l">
					<div class="m-l">
						<div class="text-muted">5 days later</div>
						<p class="zn-font">消息推送增加监控功能.</p>
					</div>
				</div>
				<div class="bg-info wrapper-sm m-l-n m-r-n m-b r r-2x zn-font">Sweeter1.0.0 正式版发布</div>
				<div class="sl-item b-primary b-l">
					<div class="m-l">
						<div class="text-muted">Wed, 21 Oct</div>
						<p class="zn-font">完成Demo首页内容修改,及其他页面细节调整.</p>
					</div>
				</div>
				<div class="sl-item b-warning b-l">
					<div class="m-l">
						<div class="text-muted">Thu, 20 Oct</div>
						<p class="zn-font">解决log Push示例功能偶见出错问题，及菜单刷新问题.</p>
					</div>
				</div>
				<div class="sl-item b-info b-l">
					<div class="m-l">
						<div class="text-muted">Mon, 19 Oct</div>
						<p class="zn-font">解决Tomcat下消息推送异常.</p>
					</div>
				</div>
				<div class="sl-item b-l">
					<div class="m-l">
						<div class="text-muted">Wed, 14 Oct</div>
						<p class="zn-font">完成项目拆分，分离出demo项目.</p>
					</div>
				</div>
				<div class="sl-item b-l">
					<div class="m-l">
						<div class="text-muted">Thu, 24 Sep</div>
						<p class="zn-font">Sweeter1.0.0 bata版发布</p>
					</div>
				</div>
			</div>
			<!-- / streamline -->
		</div>
	</div>
	<!-- / right col -->
</div>